<template>
  <div :class="themeClass">
    <div id="popUp" v-if="show == 'btn'">
      <div class="popUp_zz" :class="`color_${color}`">
        <div class="border">
          <div class="content">
            <h2 class="title">{{ title }}</h2>
            <div class="jdt title_bottom" v-if="type == 'jdt'">
              <i class="progress-val"></i>
            </div>
            <div class="title_bottom" v-else>
              <div class="btn btn_l" v-if="type == 'btn' || type == 'btn_l'" @click="cancel">取消</div>
              <div class="btn btn_r" v-if="type == 'btn' || type == 'btn_r'" @click="affirm">确认</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="popUp" v-if="show == 'jdt'">
      <div class="popUp_zz" :class="`color_${color}`">
        <div class="border">
          <div class="content">
            <h2 class="title">{{ title }}</h2>
            <div class="jdt title_bottom">
              <i class="progress-val"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="popUp" v-if="show == 'wc' || show == 'jcwc'">
      <div class="popUp_zz" :class="`color_${color}`">
        <div class="border">
          <div class="content">
            <h2 class="title">{{ title }}</h2>
            <div class="title_bottom">
              <div class="btn btn_r" @click="affirmTwo">确认</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { start, change, stop } from '@/api/index.js'
export default {
  props: {
    // popUpShow: {
    //   type: Boolean
    // },
    title: {
      type: String,
      default: '是否确认启动四级响应'
    },
    type: {
      type: String,
      default: 'btn'
    },
    color: {
      type: String,
      default: 'blue'
    },
    qdData: {
      type: Object
    }
  },
  data () {
    return {
      show: false,
      timer: ''
    }
  },
  watch: {
    type () {
      // 监听弹框类型
      this.show = this.type
      if (this.type === 'jdt') {
        if (this.title === '启动中...') {
          this.starts()
        } else if (this.title === '响应解除下发中...') {
          this.stops()
        } else {
          this.changes()
        }
        // const time = setTimeout(() => {
        //   this.show = false
        //   this.$emit('getter', 'jc')
        //   clearTimeout(time)
        // }, 3000)
      }
    }
  },
  computed: {
    /* 监听主题变化 */
    themeClass () {
      return `theme-${this.$store.getters.getTheme}`
    }
  },
  methods: {
    // open() {
    //   this.show = this.type
    //   console.log(this.type, 999999)
    // },
    /* 外面弹框关闭的方法 */
    close () {
      this.show = false
    },
    /* 弹框关闭 */
    cancel () {
      this.$emit('getter', 'gb')
      this.show = false
    },
    /* 弹框确认 */
    affirm () {
      this.$emit('getter', 'jdt')
      this.show = false
    },
    /* 完成确认 */
    affirmTwo () {
      if (this.title === '应急响应解除完成') {
        this.$emit('getter', 'jccg')
      } else {
        this.$emit('getter', 'jc')
      }
      this.show = false
      this.$emit('complete')
    },
    /* 启动响应 */
    starts () {
      start(this.qdData).then((res) => {
        if (res.code === 200) {
          this.timer = setTimeout(()=>{
            this.$emit('getter', 'wc')
            clearTimeout(this.timer)
          }, 2000)
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /* 调整响应 */
    changes () {
      change(this.qdData).then((res) => {
        if (res.code === 200) {
          this.timer = setTimeout(()=>{
            this.$emit('getter', 'wc')
            clearTimeout(this.timer)
          }, 2000)
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /* 解除响应 */
    stops () {
      stop(this.qdData).then((res) => {
        if (res.code === 200) {
          this.timer = setTimeout(()=>{
            this.$emit('getter', 'jcwc')
            clearTimeout(this.timer)
          }, 2000)
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    beforeDestroy () {
      clearTimeout(this.timer)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
#popUp {
  font-family: PingFang SC;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(16, 23, 33, 0.9);
  // background: transparent;
  z-index: 9999;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  .popUp_zz {
    // color: #37bfff;
    width: 518px;
    height: 318px;
    // background: #101620;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    // border: 1px solid #033985;
    padding: 10px;
    @include themify($themes) {
      // box-shadow: themed('yjxy_box_shadow_tk');
      // border: themed('yjxy_border_tk1');
      // color:themed('yjxy_color_tk')
    }
    position: relative;
  }
  .color_blue {
    @include themify($themes) {
      background-image: themed('yjxy_tk_bg');
    }
    // background-image: url('~@/assets/images/yjxy/tk_1.png');
  }
  .color_yellow {
    background-image: url('~@/assets/images/yjxy/tk_2.png');
  }
  .color_orange {
    background-image: url('~@/assets/images/yjxy/tk_3.png');
  }
  .color_red {
    background-image: url('~@/assets/images/yjxy/tk_4.png');
  }
  .border {
    // border: 2px solid #38bfff;
    // width: 100%;
    // height: 100%;
    // padding: 10px;
    @include themify($themes) {
      // border: themed('yjxy_border_tk2');
    }
  }
  .content {
    // border: 1px solid #294771;
    // width: 100%;
    // height: 100%;
    @include themify($themes) {
      // background: themed('yjxy_tk_bg');
      // border: themed('yjxy_border_tk3');
    }
    // background: #294771;
  }
  .title {
    margin: 80px 96px 0;
    font-size: 24px;
    letter-spacing: 4px;
    text-align: center;
    // text-shadow: 1px 2px 2px #102232;
    @include themify($themes) {
      color: themed('yjzy_td_color');
      text-shadow:themed('yjzy_title_text_shadow');
    }
  }
  .title_bottom {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    width:498px;
    top:183px;
    // margin-top: 50px;
    padding: 2px;
  }
  .jdt {
    @include themify($themes) {
      border: themed('yjxy_jdt_border');
    }
    // border: 1px solid #37bfff;
    margin-left:69px;
    width: 360px;
    height: 30px;
  }
  .progress-val {
    display: inline-block;
    height: 24px;
    width: 354px;
    @include themify($themes) {
      background: themed('yjxy_jdt_bg');
    }
    background-size: 42px 30px;
    /*background-repeat: no-repeat;*/
    background-position: 0;
    animation: progress 1s linear 0s infinite normal both;
  }
  @keyframes progress {
    from {
      background-position: 0;
    }
    to {
      background-position: 42px;
    }
  }
  .btn {
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    font-size: 18px;
  }
  .btn_l {
    @include themify($themes) {
      color: themed('yjxy_color');
    //   background: themed('yjxy_color_btn_bg');
    //   border: themed('yjxy_color_btn_border');
      @if (themed('yjxy_color_btn_border') != '') {
            // 深色模式
          background: rgba(56, 192, 255, .1);
          border: 1px solid rgba(56, 192, 255, .1);
      } @else {
          background: #EBEEF2;
          // 深色模式
      }
    }
    margin-right: 66px;
  }
  .btn_r {
    @include themify($themes) {
      color: themed('yjxy_color_btn');
      background: themed('yjxy_bj_btn');
    }
  }
}
</style>
